import axios from 'axios'
import store from '@/store'
import router from '@/router'

import { Message } from 'element-ui'

// 1. 创建了一个axios实例对象
const http = axios.create({
  // 一个项目 从 开发 - 测试 - 上线, 对应的接口服务器地址可能是不同的
  // 手动切换 => 麻烦 => 自动切换 => 环境变量
  // process.env 获取当前的环境变量
  baseURL: process.env.VUE_APP_BASE_API, // 使用了环境变量
  timeout: 5000 // 配置请求超时时间
})

// 2. 配置了一个请求拦截器
// 在请求发出去之前, 在这里做一些公共的配置 比如: 请求头携带token
http.interceptors.request.use(
  config => {
    // 2.1 获取token
    const token = store.getters.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 3. 配置了一个响应拦截器
// 在响应数据到达请求页面之前, 在这里做一些统一的处理, 比如: 统一处理返回的数据
http.interceptors.response.use(
  response => {
    const res = response.data
    // console.log(res, '8989899-----++++')

    // 3.1 针对所有success结果为false的作统一处理
    if (res.success === false) {
      // 请求成功了, 但操作失败了
      // success: false --> 此时应该走catch ---> 给外部返回一个失败的promise

      // return new Promise((resolve, reject) => {
      //   reject(new Error(res.message))
      // })

      // 统一给外部错误提示
      Message.error(res.message)
      // 给外部返回一个失败的promise
      return Promise.reject(new Error(res.message))
    }

    // 3.2 正常情况返回
    return res
  },
  error => {
    // 一旦服务器响应回来的状态码是404, 500, 一定会走这里
    // console.dir(error, '212121212121')

    // 判断token是否是过期了
    if (error.response.status === 401 && error.response.data.code === 10002) {
      // 1. 提示用户
      Message.error('您当前的登录信息已经过期, 请重新登录')
      // 2. 做退出登录处理
      store.dispatch('user/logOut')
      // 3. 跳转到登录页
      router.push('/login')
    } else {
      // 统一给外部错误提示
      Message.error(error.message)
    }

    return Promise.reject(error)
  }
)

export default http

// --------------------------------------------------

// ----------- 之前使用axios的方式-------------------
// import axios from 'axios'

// axios.defaults.baseURL = 'https://www.jd.com'
// axios({
//   method: 'get',
//   url: '/api/list',
//   params: {
//     name: 'zs',
//     age: 18
//   }
// })

// axios({
//   method: 'post',
//   url: '/api/login',
//   data: {
//     name: 'zs',
//     age: 18
//   }
// })

// 注意: 上边的写法是有局限性
// 假设我们项目中有一个需求: 我们要请求多个不同服务器接口的数据, 这个时候配置全局的baseURL就比较麻烦
// 如何解决? axios.create() 创建一个axios实例对象, 这个实例对象可以发起任何请求
// axios.create()  ---> new Axios()

// const http1 = axios.create({
//   baseURL: 'https://www.jd.com'
// })

// http1({
//   method: 'get',
//   url: '/api/list',
//   params: {
//     name: 'zs',
//     age: 18
//   }
// })

// const http2 = axios.create({
//   baseURL: 'https://www.bd.com'
// })

// http2({
//   method: 'post',
//   url: '/api/login',
//   data: {
//     name: 'zs',
//     age: 18
//   }
// })

